<template>
  <div
  class="wrap"
    v-infinite-scroll="load"
    infinite-scroll-disabled="disabled"
    infinite-scroll-distance="400"
  >
    <ElHeader></ElHeader>
    <el-container>
      <div class="bgi">
        <div id="container" style="width: 100%; height: 300px">
          <img
            src="../assets/consult.jpg"
            style="width: 100%; height: 300px"
            alt=""
          />
        </div>

        <div class="text">
          <h2 class="fl">最新资讯</h2>
          <div class="fr">
            <a href="">总部动态</a>
            <a href="">旅社动态</a>
            <a href="">视频</a>
            <a href="">加盟消息</a>
            <a href="">精彩活动</a>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="content">
            <div>
            <el-row>
              <el-col
                :span="7"
                v-for="item in consult"
                :key="item.pid"
                class="row" style="margin-right:20px;margin-bottom: 20px;"
                
              >
                <el-card class="card" :body-style="{ padding: '0px' }">
                  <div class="box" style="height:250px;padding: 10px; margin-bottom: 30px;">
                    <img :src="item.picture" class="image" style="width:100%;height: 75%;"/>
                    <div class="box1" >
                      <h3>{{ item.title }}</h3>
                      

                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
        </div>
        <p v-if="loading" style="text-align: center">加载中...</p>
          <p v-if="noMore" style="text-align: center">没有更多了~</p>
    </div>
        <div class="aside">
          <div class="contact4">
            <i class="el-icon-s-custom"></i>
            <span>人才招聘</span>
          </div>
          <el-link href="" :underline="false" class="contact1"
            ><div class="iii">
              <svg
                t="1669692108818"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3225"
                width="30"
                height="30"
              >
                <path
                  d="M640 896h192V469.376h42.666667V896.213333c0 23.466667-19.029333 42.474667-42.666667 42.474667H597.333333V725.333333h-170.666666v213.333334H192c-23.573333 0-42.666667-18.986667-42.666667-42.453334V469.354667h42.666667V896h192V682.666667h256v213.333333z"
                  fill="#fff"
                  p-id="3226"
                ></path>
                <path
                  d="M100.032 506.133333a21.333333 21.333333 0 1 1-29.397333-30.933333L466.282667 99.349333a66.688 66.688 0 0 1 91.434666 0L953.386667 475.2a21.333333 21.333333 0 1 1-29.397334 30.933333L528.341333 130.282667a24.021333 24.021333 0 0 0-32.682666 0L100.053333 506.133333zM832 192h-128a21.333333 21.333333 0 0 1 0-42.666667h149.333333a21.333333 21.333333 0 0 1 21.333334 21.333334v149.333333a21.333333 21.333333 0 0 1-42.666667 0V192z"
                  fill="#fff"
                  p-id="3227"
                ></path></svg
              >&nbsp;&nbsp;旅社预定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-arrow-right"></i>
            </div>
          </el-link>

          <el-link href="" :underline="false" class="contact2"
            ><div class="iii">
              <svg
                t="1669693293666"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5351"
                width="30"
                height="30"
              >
                <path
                  d="M915.184177 518.571672c11.766998 0 21.310352-9.561773 21.310352-21.327748L936.494529 265.848811c0-44.770669-36.261878-81.033571-81.027431-81.033571L161.908018 184.815239c-44.768623 0-81.030501 36.262902-81.030501 81.033571l0 490.908636c0 44.769646 36.262902 81.005942 81.030501 81.005942L855.467097 837.763388c44.765553 0 81.027431-36.236296 81.027431-81.005942l0-67.518766c-0.066515-11.721973-9.565866-21.219277-21.310352-21.219277-11.737322 0-21.284769 9.497305-21.323655 21.219277l0 0.044002c0 0.042979 0 0.042979 0 0.085958l0 63.123666c0 23.571858-19.132756 42.659589-42.662659 42.659589l-407.951249 0c-0.020466 0-0.020466 0-0.047072 0L166.177252 795.151895c-23.528879 0-42.662659-19.087731-42.662659-42.659589L123.514593 423.071621l770.346953 0 0 74.172303C893.860523 509.010923 903.397736 518.571672 915.184177 518.571672zM123.51357 270.114974c0-23.553439 19.133779-42.660612 42.662659-42.660612l685.020612 0c23.529903 0 42.662659 19.107173 42.662659 42.660612l0 27.287483L123.51357 297.402457 123.51357 270.114974zM123.51357 380.435569l0-40.395012 770.346953 0 0 40.395012L123.51357 380.435569zM760.290411 632.263038l0 131.090641 20.411889 0L780.7023 714.096834l33.20117 0c31.881105-0.441045 48.068785-14.470573 48.50983-42.208311-1.696642-25.136493-17.216103-38.32998-46.579875-39.626509L760.290411 632.262014zM841.366961 672.569022c-0.440022 16.621563-10.467399 25.12319-29.995151 25.560142l-30.66951 0 0-49.881061 30.66951 0C830.505589 648.666636 840.467475 656.802944 841.366961 672.569022zM726.823182 763.353678 726.823182 632.263038l-19.768229 0 0 131.090641L726.823182 763.353678zM242.784 728.741369l0-77.834716-77.708849 0 0 77.834716L242.784 728.741369zM623.183753 746.070037c-0.855484-1.717108-14.904455-39.625486-42.154076-113.808022l-21.660322 0 52.317553 131.090641 22.340821 0 52.353368-131.090641-22.358217 0c-26.368554 73.741491-39.785122 111.648846-40.178071 113.808022L623.183753 746.070037z"
                  p-id="5352"
                  fill="#ffffff"
                ></path></svg
              >&nbsp;&nbsp;会员卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i
                class="el-icon-arrow-right"
              ></i></div
          ></el-link>

          <el-link href="" :underline="false" class="contact3"
            ><div class="iii">
              <svg
                t="1669692664663"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4485"
                width="30"
                height="30"
              >
                <path
                  d="M510.4 922h-220c-65.6 0-119-50.5-119-112.6V555.7c0-22.7 18.4-41.2 41.2-41.2s41.2 18.4 41.2 41.2v253.6c0 16.7 16.4 30.2 36.6 30.2h220c22.7 0 41.2 18.4 41.2 41.2S533.1 922 510.4 922z"
                  fill="#fff"
                  p-id="4486"
                ></path>
                <path
                  d="M514 608.5c-43.6 0-85.3-14.4-117.9-39.9-44.3 31.6-102.6 43.1-158.2 29.4-43.1-10.5-80.6-35.2-105.5-69.6-30.1-41.3-39.3-92.9-25.2-141.4l48.2-201.3c15.3-52.3 64.3-87.4 119.7-87.4h463c51 0 97.5 30.2 115.6 75.2 0.4 1 0.8 2.1 1.1 3.1L906.1 341c27.6 80 19.1 144.9-25.7 191.7-13 13.8-28.7 25.6-46.7 35.1-61.1 32.3-136.1 28.4-192.6-6.9-33.6 30.3-78.7 47.6-127.1 47.6zM397.4 470.7h1c12.5 0.3 24.2 6.3 31.7 16.2 18.7 24.5 50 39.2 83.8 39.2 36 0 69.5-17 87.4-44.4 2-3.1 4.4-5.8 7.1-8.2 14.6-13.2 40.7-13.2 55.3 0 0.8 0.7 1.6 1.5 2.4 2.3 32.1 33.7 86.4 41.7 129.1 19.1 10.1-5.3 18.6-11.7 25.4-18.9l0.3-0.3c14.1-14.7 30.2-42 7-109.1l-51.1-163.8c-6-13.4-21.4-22.3-38.6-22.3h-463c-18.8 0-35.6 11-40.1 26.2l-48.2 201.2c-7.6 26.1-3 51 12.3 71.9 13.5 18.7 34.1 32.1 58.4 38 40.7 10.1 83.2-2.8 108.4-32.7 7.7-9 19.3-14.4 31.4-14.4zM880.7 828.3H694.6c-22.7 0-41.2-18.4-41.2-41.2s18.4-41.2 41.2-41.2h186.1c22.7 0 41.2 18.4 41.2 41.2s-18.4 41.2-41.2 41.2z"
                  fill="#fff"
                  p-id="4487"
                ></path>
                <path
                  d="M787.7 921.3c-22.7 0-41.2-18.4-41.2-41.2V694c0-22.7 18.4-41.2 41.2-41.2s41.2 18.4 41.2 41.2v186.1c0 22.8-18.5 41.2-41.2 41.2z"
                  fill="#fff"
                  p-id="4488"
                ></path></svg
              >&nbsp;&nbsp;旅社加盟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i
                class="el-icon-arrow-right"
              ></i></div
          ></el-link>
          <div class="nbsp">&nbsp;</div>
          <div class="gfxd">
            <a href="">
              <img
                src="http://www.yhachina.com/data/images/2020-08-19/5f3cb08134015.jpg"
                alt=""
              />
            </a>
          </div>
        </div>
      </div>
    </el-container>
    <ElFooter></ElFooter>
  </div>
</template>

<script>
import ElFooter from "@/components/ElFooter.vue";
import ElHeader from "@/components/ElHeader.vue";
export default {
  components: { ElFooter, ElHeader },
  data() {
    return {
      consult: {
        proid: '',
        hname: '',
        himg: '',
        hlocation: '',
        pname: '',
      },

     
      pid: '',
      cs: '',
      loading: false,
      page: '',
      total: '',
      pagesize: '',
    }
  },

  mounted() {
    this.$http.jdApi.queryConsult({ page: 1, pagesize: 5 }).then((res) => {
      console.log('旅社', res)
      this.consult = res.data.data
      console.log(this.consult)
      this.page = res.data.page
      this.pagesize = res.data.pagesize
      this.total = res.data.total
      console.log(this.page, this.pagesize, this.total)
    })

   
  },
  computed: {
    noMore() {
      console.log(
        'this.consult.length',
        this.consult.length,
        'this.total',
        this.total
      )
      return this.consult.length >= this.total
    },
    disabled() {
      return this.loading || this.noMore
    },
  },
  methods: {
    load() {
      this.loading = true
      console.log('加载')
      setTimeout(() => {
        console.log('page', this.page)
        if (this.pid == '') {
          this.page++
          this.$http.jdApi
            .queryConsult({ page: this.page, pagesize: 5 })
            .then((res) => {
              console.log('旅社', res)
              this.consult.push(...res.data.data)
              console.log(this.consult)
            })
        }

        this.loading = false
      }, 200)
    },
    
  },
};
</script>

<style lang="scss" scoped>
.bgi {
  padding: 0;
  margin-top: 30px;
  width: 100%;
  .img {
    width: 1021px;
  }
  .text {
    z-index: 1000;
    background-color: white;
    height: 50px;
    width: 1080px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    bottom: 50px;
    color: #333;
    border-radius: 5px;
    box-shadow: 0 15px 35px -15px rgb(47 130 36 / 70%);
    justify-items: center;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .fl {
      display: inline;
      
      font-size: 30px;
      line-height: 100%;
      
    }
    .fr {
      display: inline;
      float: right;

      justify-items: center;

      a {
        display: inline-block;
        width: 110px;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background-color: #87c524;
        text-decoration: none;
      }
    }
  }
}
.el-container {
  display: flex;
  flex-direction: column;
  flex: none;
  margin-bottom: 50px;
}
.main {
  width: 1080px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  .content {
    width: 810px;
    border-radius: 8px;
    margin-bottom: 200px;

    > p {
      color: #999;
    }
    > ul {
      width: 100%;
      border-bottom: 2px solid #e3e3e3;
      height: 57px;
      background-color: #fafafa;
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;

      li {
        display: list-item;
        width: calc(100% / 5);
        text-align: center;
        line-height: 57px;
        cursor: pointer;
        transition: 0.3s;
      }
      :hover {
        background-color: #fff;
        box-shadow: 0 6px 8px -5px #87c524;
      }
    }
    > .about {
      > div {
        background-color: #fafafa;
        padding: 20px 0;
        margin-bottom: 20px;
        color: #333;
        > h3 {
          line-height: 35px;
          color: #999;
          border-bottom: 2px solid #eee;
          padding-left: 20px;
          margin-top: 0;
        }
        > table {
          padding-left: 20px;
        }
        > p {
          padding-left: 20px;
          color: #f7941c;
          a {
            color: #f7941c;
          }
        }
        > span {
          padding-left: 20px;
          color: #000;
          font-weight: bold;
        }
      }
    }
  }
  .aside {
    width: 240px;
    .iii {
      display: flex;
      justify-content: space-between;
      svg {
        font-size: 30px;
        height: 30px;
        line-height: 30px;
      }
      i {
        font-size: 30px;
        height: 30px;
        line-height: 30px;
      }
    }
    .contact1 {
      font-size: 23px;
      height: 30px;
      line-height: 30px;
      background-color: #87c524;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      width: 240px;
      color: white;
      font-weight: bold;
    }
    .contact2 {
      font-size: 23px;
      height: 30px;
      background-color: #f7941c;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      width: 240px;
      color: white;
      font-weight: bold;
    }
    .contact3 {
      font-size: 23px;
      height: 30px;
      background-color: #4b8fcc;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      width: 240px;
      color: white;
      font-weight: bold;
    }
    .contact4 {
      width: 280px;
      height: 100px;
      text-align: center;
      font-size: 23px;
      background-color: #aaa;
      line-height: 100px;
      border-radius: 8px;
      color: #fff;
      margin-bottom: 20px;
    }
    .nbsp {
      height: 21px;
    }
    .gfxd {
      img {
        width: 280px;
        border: none;
      }
    }
  }
}
</style>